<template>
  <div>
    <div class="disFlxJS _pt-10 _pb-15">
      <div class="fw-6 fz-15 _pr-30 ov-1" style="color: #333;">
        <a-tooltip :title="activityTitle"> 当前活动: {{ activityTitle }} </a-tooltip>
      </div>
      <div style="flex-shrink: 0;">
        <a-button type="primary" :loading="addSessionLoading" @click="openSetSessionModel()">
          {{ addSessionLoading ? '正在新建中...' : '新建活动安排' }}
        </a-button>
        <a-button type="solid" icon="import" class="_ml-10" :disabled="!currentTabs" @click="exportExcel"
          >导出Excel</a-button
        >
      </div>
    </div>
    <a-tabs type="card" :style="{ height: '40px' }" v-model="currentTabs" :hideAdd="true">
      <a-tab-pane v-for="(v, i) in arrangeList" :key="v.id" :closable="false">
        <template slot="tab">
          <a-popover trigger="hover" placement="topRight">
            <template slot="content">
              <a style="color: #87d068;" @click="openSetSessionModel(v)">编辑</a>
              <div class="_pt-10"></div>
              <a style="color: #f50;" @click="removeSession(v, i)">删除</a>
            </template>
            {{ v.name }}
            <a-icon type="edit" class="_ml-5" />
          </a-popover>
        </template>
      </a-tab-pane>
    </a-tabs>
    <!-- 新增 || 编辑场次弹窗 -->
    <SetSessionModel ref="SetSessionModel" @submit="setSessionSubmit" />
  </div>
</template>

<script>
import SetSessionModel from './setSessionModel.vue'
import {
  createActivityArrange,
  editActivityArrange,
  removeActivityArrange,
  activityArrangeExportExcel
} from '@/api/activity/activity.js'

export default {
  props: {
    activityId: {
      type: Number | String
    },
    activityTitle: {
      type: String,
      default: ''
    },
    arrangeList: {
      type: Array,
      default: () => []
    },
    currentID: {
      type: Number | undefined,
      default: undefined
    }
  },
  components: {
    SetSessionModel
  },
  watch: {
    currentID(nval){
      this.currentTabs = nval
    },
    currentTabs(nval){
      this.$emit('refresh')
      this.$emit('update:currentID',nval)
    }
  },
  data() {
    return {
      currentTabs: undefined,
      addSessionLoading: false, // 新增活动场次loading
      editObj: {}
    }
  },
  methods: {
    // 打开    新增||编辑场次弹窗
    openSetSessionModel(v) {
      this.editObj = v
      this.$refs.SetSessionModel.openModel(v)
    },
    // 确认    新增||编辑场次
    async setSessionSubmit(form) {
      const _this = this
      try {
        _this.$refs.SetSessionModel.closeModel()
        const params = Object.assign(form, { activityId: _this.activityId, activityName: _this.activityTitle })
        if (params.id) {
          await editActivityArrange(params)
          _this.$message.success('场次编辑完成')
        } else {
          _this.addSessionLoading = true
          await createActivityArrange(params)
          _this.$message.success('新增场次成功')
        }
        _this.$emit('refresh')
      } finally {
        setTimeout(() => { _this.addSessionLoading = false }, 500)
      }
    },
    // 删除场次
    removeSession(v, i) {
      const _this = this
      _this.$confirm({
        title: `确认删除${v.name}?`,
        centered: true,
        content: '删除场次后,该场次下的排座信息将彻底删除,请确定是否删除?',
        onOk() {
          return new Promise((resolve, reject) => {
            removeActivityArrange({ activityArrangeId: v.id })
              .then(() => {
                _this.arrangeList.splice(i, 1)
                if (_this.currentTabs === v.id) {
                  // 如果删除的是当前场次,则初始化选中场次
                  _this.currentTabs = _this.arrangeList.length ? _this.arrangeList[0].id : undefined
                }
                _this.$message.success('删除成功')
                resolve()
              })
              .catch(err => {
                reject()
              })
          })
        },
        onCancel() {}
      })
    },
    // 导出Excel
    exportExcel() {
      activityArrangeExportExcel({ activityId: this.activityId })
    }
  }
}
</script>

<style lang="less" scoped></style>
